<template>
  <div>
    <a-card>
      <template #title>
        <a-tabs v-model:activeKey="searchParams.status" @tab-click="onClickTab">
          <a-tab-pane
            key="1"
            :tab="'显示中的提货点(' + headerCount.show + ')'"
          />
          <a-tab-pane
            key="0"
            :tab="'隐藏中的提货点(' + headerCount.hide + ')'"
          />
          <a-tab-pane
            key="2"
            :tab="'回收站的提货点(' + headerCount.recycle + ')'"
          />
        </a-tabs>
      </template>
      <search-form :model="searchParams" @search="search">
        <a-form-item label="名称" name="prop">
          <a-input v-model:value="searchParams.prop" placeholder="请输入" />
        </a-form-item>
      </search-form>
      <div class="table-toolbar">
        <add-button @click="add()" />
      </div>
      <g-table
        ref="tableRef"
        :columns="columns"
        :api="getPageList"
        :params="searchParams"
      />
    </a-card>
    <AddrDetail
      v-model:visible="visible"
      :data="activeRow"
      @change="search(false)"
    />
  </div>
</template>

<script setup lang="tsx">
import {
  storeDel,
  storeUpdateStatusApi,
  storeGetCountApi,
  getPageList,
} from "./api";
import type { Istore } from "./entity";
import AddrDetail from "./detail.vue";
import { FEE_MAP } from "@/utils/constant";
const searchParams = reactive({
  prop: "",
  status: "1",
});

let visible = $ref(false);

const { tableRef, columns, search } = useTable<Istore>([
  { title: "提货点名称", dataIndex: "name" },
  {
    title: "提货点电话",
    dataIndex: "phone",
  },
  {
    title: "地址",
    dataIndex: "detailedAddress",
  },
  {
    title: "营业时间",
    dataIndex: "dayTime",
  },
  {
    title: "状态",
    dataIndex: "isShow",
    width: 120,
    customRender: ({ record }) => (
      <>
        <a-switch
          onClick={() => updateState(record)}
          v-model:checked={record.isShow}
          inline-prompt
          checkedChildren="开启"
          unCheckedChildren="关闭"
        />
      </>
    ),
  },
  { title: "排序", dataIndex: "sort" },
  { title: "添加时间", dataIndex: "createTime" },
  {
    title: "操作",
    dataIndex: "op",
    customRender: ({ record }) => (
      <>
        <table-button onClick={() => add(record)}>编辑</table-button>
        <confirm-button danger onClick={() => remove(record)}>
          删除
        </confirm-button>
      </>
    ),
  },
]);
onMounted(() => {
  storeGetCount();
});
function onClickTab() {
  search(false);
}
let activeRow = $ref<Partial<Istore>>({});
function add(row: Partial<Istore> = {}) {
  activeRow = { ...row };
  visible = true;
}
const updateState = async (row: any) => {
  let { id, status } = row;
  await storeUpdateStatusApi({ id, status });
  AntMessage.success("操作成功");
  search(false);
};
const headerCount = ref<any>({});
async function storeGetCount() {
  let res = await storeGetCountApi();
  headerCount.value = res;
}

function remove({ id }: Istore) {
  storeDel(id as number).then(() => {
    AntMessage.success("已删除");
    storeGetCount();
    search(false);
  });
}
</script>

<style lang="scss"></style>
